<template>
  <div class="video_player" @click="handleVideoPlayer">
    <div
      :class="{
        video_player_spring_frame: true,
        active_bk: !playerIconFull,
        active_horizontal_screen: !playerHorizontalScreen,
      }"
    >
      <video
        ref="videoPlayer"
        :src="videoLinkAddress"
        :poster="poster||defImg"
        webkit-playsinline="true"
        playsinline="true"
        @loadeddata="handleLoadeddata"
        @timeupdate="handleTimeupdate"
      >
        <track label="中文" kind="captions"/>
      </video>
      <div
        class="player_icon_start_play"
        v-show="playerIconStartPlay"
        @click="handlePlayerStartPlay"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="70"
          height="70"
          viewBox="0 0 70 70"
        >
          <path
            transform="translate(15,15) scale(0.04,0.04)"
            d="M576,363L810,512L576,661zM342,214L576,363L576,661L342,810z"
          ></path>
        </svg>
      </div>
      <div
        ref="progress"
        class="progress"
        :style="{ opacity: playerBottomListFlag ? 1 : 0 }"
      >
        <div
          ref="sliderCircle"
          class="slider_circle"
          @touchstart="handleTouchstart"
          @touchmove="handleTouchmove"
          @touchend="handleTouchend"
        />
        <div ref="sliderCircleLarge" class="slider_circle_large" />
      </div>
      <div class="video_player_btns" v-show="playerBottomListFlag">
        <div>
          <div class="play_btn" @click="handlePlayBtn">
            <div class="player_icon_play" v-show="playerIconPlay">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="40"
                height="40"
                viewBox="0 0 40 40"
              >
                <path
                  transform="translate(2,2) scale(0.0320625 0.0320625)"
                  d="M576,363L810,512L576,661zM342,214L576,363L576,661L342,810z"
                ></path>
              </svg>
            </div>
            <div class="player_icon_pause" v-show="!playerIconPlay">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="40"
                height="40"
                viewBox="0 0 40 40"
              >
                <path
                  transform="translate(2,2) scale(0.0320625 0.0320625)"
                  d="M598,214h170v596h-170v-596zM256 810v-596h170v596h-170z"
                ></path>
              </svg>
            </div>
          </div>
          <div class="time_num">{{ playDuration }}/{{ durationTotal }}</div>
        </div>
        <div>
          <div class="large_btn" @click="handleLargeBtn">
            <div class="player_icon_large" v-show="playerIconLarge">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="28"
                height="28"
                viewBox="0 0 28 28"
              >
                <path
                  transform="scale(0.0220625 0.0220625)"
                  d="M358.4 358.4h-204.8v307.2h204.8l256 256v-819.2l-256 256z"
                ></path>
                <path
                  transform="scale(0.0220625 0.0220625)"
                  d="M940.632 837.632l-72.192-72.192c65.114-64.745 105.412-154.386 105.412-253.44s-40.299-188.695-105.396-253.424l-0.016-0.016 72.192-72.192c83.639 83.197 135.401 198.37 135.401 325.632s-51.762 242.434-135.381 325.612l-0.020 0.020zM795.648 693.248l-72.704-72.704c27.756-27.789 44.921-66.162 44.921-108.544s-17.165-80.755-44.922-108.546l0.002 0.002 72.704-72.704c46.713 46.235 75.639 110.363 75.639 181.248s-28.926 135.013-75.617 181.227l-0.021 0.021z"
                ></path>
              </svg>
            </div>
            <div class="player_icon_muted" v-show="!playerIconLarge">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="28"
                height="28"
                viewBox="0 0 28 28"
              >
                <path
                  transform="scale(0.0220625 0.0220625)"
                  d="M358.4 358.4h-204.8v307.2h204.8l256 256v-819.2l-256 256z"
                ></path>
                <path
                  transform="scale(0.0220625 0.0220625)"
                  d="M920.4 439.808l-108.544-109.056-72.704 72.704 109.568 108.544-109.056 108.544 72.704 72.704 108.032-109.568 108.544 109.056 72.704-72.704-109.568-108.032 109.056-108.544-72.704-72.704-108.032 109.568z"
                ></path>
              </svg>
            </div>
          </div>
          <div class="quick_btn">
            <div class="quick_text" @click="handleQuickText">
              {{ quickText }}
            </div>
            <div class="quick_list" v-show="quickListFlag">
              <div
                :class="{ active_quick: quickText == qlItem.text }"
                v-for="qlItem in quickListArr"
                :key="qlItem.text"
                @click="handleQuickListItem(qlItem)"
              >
                {{ qlItem.text }}
              </div>
            </div>
          </div>
          <div
            class="hs_btn"
            @click="handleHorizontalScreen"
            v-show="!playerIconFull"
          >
            <div class="player_icon_hs" v-show="playerHorizontalScreen">
              <svg
                t="1673761275028"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2825"
                width="28"
                height="28"
              >
                <path
                  d="M832 448l-128-128h96V224a32 32 0 0 0-32-32h-192V128h192a96 96 0 0 1 96 96v96h96zM448 160a32 32 0 0 0-32-32H160a32 32 0 0 0-32 32v288H64V160a96 96 0 0 1 96-96h256a96 96 0 0 1 96 96v288h-64V160zM160 512h704a96 96 0 0 1 96 96v256a96 96 0 0 1-96 96H160a96 96 0 0 1-96-96v-256a96 96 0 0 1 96-96zM128 864a32 32 0 0 0 32 32h704a32 32 0 0 0 32-32v-256a32 32 0 0 0-32-32H160a32 32 0 0 0-32 32v256z"
                  fill="#ffffff"
                  p-id="2826"
                ></path>
              </svg>
            </div>
            <div class="player_icon_vs" v-show="!playerHorizontalScreen">
              <svg
                t="1673761491285"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3184"
                width="28"
                height="28"
              >
                <path
                  d="M864 960h-256a96 96 0 0 1-96-96V160a96 96 0 0 1 96-96h256a96 96 0 0 1 96 96v704a96 96 0 0 1-96 96z m32-800a32 32 0 0 0-32-32h-256a32 32 0 0 0-32 32v704a32 32 0 0 0 32 32h256a32 32 0 0 0 32-32V160zM64 864v-256a96 96 0 0 1 96-96h288v64H160a32 32 0 0 0-32 32v256a32 32 0 0 0 32 32h288v64H160a96 96 0 0 1-96-96z m256-640H224a32 32 0 0 0-32 32v192H128V256a96 96 0 0 1 96-96h96V64l128 128-128 128V224z"
                  fill="#ffffff"
                  p-id="3185"
                ></path>
              </svg>
            </div>
          </div>
          <div class="full_btn" @click="handleFullBtn">
            <div class="player_icon_requestfull" v-show="playerIconFull">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="40"
                height="40"
                viewBox="0 0 40 40"
              >
                <path
                  transform="scale(0.0320625 0.0320625)"
                  d="M598 214h212v212h-84v-128h-128v-84zM726 726v-128h84v212h-212v-84h128zM214 426v-212h212v84h-128v128h-84zM298 598v128h128v84h-212v-212h84z"
                ></path>
              </svg>
            </div>
            <div class="player_icon_exitfull" v-show="!playerIconFull">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="40"
                height="40"
                viewBox="0 0 40 40"
              >
                <path
                  transform="scale(0.0320625 0.0320625)"
                  d="M682 342h128v84h-212v-212h84v128zM598 810v-212h212v84h-128v128h-84zM342 342v-128h84v212h-212v-84h128zM214 682v-84h212v212h-84v-128h-128z"
                ></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import defImg from  '@/assets/static/image/dz/haibao.jpg'
export default {
  name: "VideoPlayer",
  props: ["videoLinkAddress","poster"],
  data() {
    return {
      videoPlayer: null, //视频元素
      playerBottomListFlag: false, //底部列表按钮是否显示
      playerIconStartPlay: true, //开始播放按钮
      playerIconPlay: true, //底部开始播放按钮
      playerIconLarge: true, //音量按钮
      playerIconFull: true, //全屏按钮
      playerHorizontalScreen: true, //横竖屏展示
      quickListFlag: false, //倍速列表是否展示
      quickText: "x1", //展示的倍速
      quickListArr: [
        {
          text: "x1",
          ql: 1,
        },
        {
          text: "x1.25",
          ql: 1.25,
        },
        {
          text: "x1.5",
          ql: 1.5,
        },
        {
          text: "x2",
          ql: 2,
        },
      ], //倍速列表数据
      durationTotal: "00:00:00", //视频总时长
      playDuration: "00:00:00", //视频播放时间
      pressWidth: 0, //得到当前按下的位置
      pressLeft: 0, //得到样式中的translateX坐标
      curTime: 0, //滑动的时间
      timerScroll: null, //定时器
      dotOffsetLeft: 0, //小圆点移动位置
      dotWidth: 15, //小圆点宽度
      defImg
    };
  },
  mounted() {
    this.videoPlayer = this.$refs.videoPlayer; //获取video元素
  },
  destroyed() {
    clearInterval(this.timerScroll);
  },
  methods: {
    //视频全局事件
    handleVideoPlayer() {
      this.quickListFlag = false;
      this.playerBottomListFlag = !this.playerBottomListFlag;
    },
    //第一帧加载完成后触发
    handleLoadeddata() {
      this.durationTotal = this.getDurationTotal(this.videoPlayer.duration); //获取视频总时长
    },
    //开始播放按钮事件
    handlePlayerStartPlay() {
      this.videoPlayer.play(); //播放视频
      this.musicScrollBarTime();
      this.playerBottomListFlag = true;
      this.playerIconPlay = this.playerIconStartPlay = false;
    },
    //底部播放按钮事件
    handlePlayBtn(e) {
      e.stopPropagation();
      //播放与结束视频
      if (this.playerIconPlay) {
        this.videoPlayer.play();
        this.musicScrollBarTime();
        this.playerIconStartPlay = false;
      } else {
        this.videoPlayer.pause();
        clearInterval(this.timerScroll);
        this.playerIconStartPlay = true;
      }
      this.playerIconPlay = !this.playerIconPlay;
      this.quickListFlag = false;
    },
    //音量事件
    handleLargeBtn(e) {
      e.stopPropagation();
      this.playerIconLarge = !this.playerIconLarge;
      this.videoPlayer.muted = !this.playerIconLarge;
      this.quickListFlag = false;
    },
    //全屏事件
    handleFullBtn() {
      this.playerIconFull = !this.playerIconFull;
      //是否全屏且横屏了
      if (this.playerIconFull && !this.playerHorizontalScreen) {
        this.playerHorizontalScreen = true;
      }
      this.musicScrollBarTime();
    },
    //横屏事件
    handleHorizontalScreen() {
      this.playerHorizontalScreen = !this.playerHorizontalScreen;
      this.musicScrollBarTime();
    },
    //倍速事件
    handleQuickText(e) {
      e.stopPropagation();
      this.quickListFlag = !this.quickListFlag;
    },
    //倍速列表按钮点击事件
    handleQuickListItem({ text, ql }) {
      this.videoPlayer.playbackRate = ql; //设置视频倍速
      this.quickText = text; //展示的倍速
      this.quickListFlag = false;
    },
    handleTimeupdate() {
      this.playDuration = this.getDurationTotal(this.videoPlayer.currentTime);
    },
    //手指按下
    handleTouchstart(e) {
      e.stopPropagation();
      this.quickListFlag = false;
      this.pressWidth = e.changedTouches[0].pageX; //得到当前按下的位置
      this.pressLeft = this.$refs.sliderCircle.getBoundingClientRect().left;
      clearInterval(this.timerScroll); //清除定时器
    },
    //手指移动
    handleTouchmove(e) {
      e.stopPropagation();
      this.videoPlayer.pause(); //移动时不播放
      const { pageX, pageY } = e.changedTouches[0] || {};
      //全屏 因为底部栏容器旋转过 所以手指按下的位置需要拿取 pageY 的值
      const pressDistance =
        (this.playerHorizontalScreen ? pageX : pageY) - this.pressWidth; //手指走的距离
      const progressOffWidth =
        this.$refs.progress.offsetWidth - this.$refs.sliderCircle.offsetWidth;
      this.dotOffsetLeft = this.pressLeft + pressDistance; //要走的距离
      // 判定边界
      if (this.dotOffsetLeft < 0) {
        this.dotOffsetLeft = 0;
      } else if (this.dotOffsetLeft > progressOffWidth) {
        this.dotOffsetLeft = progressOffWidth;
      }
      //设置小圆点和进度条位置
      this.setProgressBarLeft(this.dotOffsetLeft);
      // 得到当前的时间
      this.curTime =
        (this.dotOffsetLeft / progressOffWidth) * this.videoPlayer.duration;
      this.playDuration = this.getDurationTotal(this.curTime);
    },
    //手指抬起
    handleTouchend() {
      this.videoPlayer.currentTime = this.curTime; //设置播放时间
      this.videoPlayer.play();
      this.musicScrollBarTime();
      this.playerIconPlay = this.playerIconStartPlay = false;
    },
    // 设置动态播放时间
    musicScrollBarTime() {
      clearInterval(this.timerScroll);
      this.timerScroll = setInterval(() => {
        //当前播放的时间 / 总时间 * 进度条容器宽度 - 小圆点宽度
        const left =
          (this.videoPlayer.currentTime / this.videoPlayer.duration) *
          (this.$refs.progress.offsetWidth - this.dotWidth);
        this.setProgressBarLeft(left);
        this.isPLayEnd();
      }, 1000);
    },
    //是否播放结束
    isPLayEnd() {
      if (this.videoPlayer.currentTime >= this.videoPlayer.duration) {
        this.playerIconPlay = this.playerIconStartPlay = true;
        clearInterval(this.timerScroll);
      }
    },
    //设置小圆点 进度条 位置
    setProgressBarLeft(left) {
      this.$refs.sliderCircle.style.left = `${left}px`;
      this.$refs.sliderCircleLarge.style.width = `${
        left + this.dotWidth / 2
      }px`;
    },
    //不足两位补齐
    //strArr 是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分
    //...val 剩余参数 是模板字符串各个变量被替换后的值 hour、minute、second
    padStartTwoZero(strArr, ...val) {
      return val.reduce(
        (prev, cur, i) =>
          prev + cur.toString().padStart(2, "0") + strArr[i + 1],
        strArr[0]
      );
    },
  },
  computed: {
    // 获取视频总时长
    getDurationTotal() {
      return (time) => {
        const hour = Math.floor(time / 3600), //时
          minute = Math.floor(time / 60) % 60, //分
          second = Math.floor(time) % 60; //秒
        return this.padStartTwoZero`${hour}:${minute}:${second}`;
      };
    },
  },
};
</script>

<style scoped>
@import url("~@/assets/css/partyBuildingVideo/videoPlayerStyle.css");
</style>
